<template>
  <div class="monitoringStations">
    <TitleSubColumn name="监测站点" />
    <div class="content">
      <div class="chartBG">
        <section>
          <h3><CountTo :startVal="1" :endVal="487" :duration="3000" /></h3>
          <p>站点总数(个)</p>
        </section>
      </div>
      <!-- 图表主体 -->
      <div class="chartContent" ref="chartRef"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import TitleSubColumn from "@/components/TitleSubColumn";
import { useECharts } from "@gui-pkg/hooks";
import * as echarts from "echarts";
import { CountTo } from "@gui-pkg/components";

defineOptions({ name: "ChartsColumn" });

const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
const state = reactive({
  name: "vue3",
});

const initChartData = async () => {
  const chartData = [
    {
      value: 30,
      name: "水位站",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
          {
            offset: 0,
            color: "rgba(34, 247, 254, 0.1)",
          },
          { offset: 1, color: "rgba(34, 247, 254, 1)" },
        ]),
      },
    },
    {
      value: 24,
      name: "流量站",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
          {
            offset: 0,
            color: "rgba(20, 180, 240, 0.1)",
          },
          { offset: 1, color: "rgba(20, 180, 240, 1)" },
        ]),
      },
    },
    {
      value: 42,
      name: "水质站",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
          {
            offset: 0,
            color: "rgba(248, 137, 3, 0.1)",
          },
          { offset: 1, color: "rgba(248, 137, 3, 1)" },
        ]),
      },
    },
    {
      value: 86,
      name: "雨量站",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          {
            offset: 0,
            color: "rgba(74, 219, 108, 0.1)",
          },
          { offset: 1, color: "rgba(74, 219, 108, 1)" },
        ]),
      },
    },
    {
      value: 178,
      name: "视频站",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "rgba(250, 214, 46, 0.1)",
          },
          { offset: 1, color: "rgba(250, 214, 46, 1)" },
        ]),
      },
    },
  ];
  const chartOption = {
    color: ["#20F8FF", "#06B7FD", "#23DF7B", "#FDD82E", "#FF8A00"],
    grid: {
      top: "0",
      left: "0",
      right: "0",
      bottom: "0",
      containLabel: true,
    },
    legend: {
      orient: "vertical",
      right: "10",
      bottom: "40",
      itemGap: 10,
      itemWidth: 10,
      itemHeight: 8,
      itemStyle: {
        // color: []
      },
      textStyle: {
        // 文字的样式
        fontSize: 12, // 可控制每个legend项的间距
        color: "#aaa",
        rich: {
          // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
          oneone: {
            color: "#B4DFFF",
            fontSize: 10,
            padding: [0, 4],
            fontWeight: "bolder",
          },
          twotwo: {
            color: "#B4DFFF",
            fontSize: 10,
            padding: [0, 6],
            fontWeight: "bolder",
          },
        },
      },
      formatter: (name) => {
        let value; // 遍历拿到数据
        for (let i = 0; i < chartData.length; i++) {
          if (chartData[i].name == name) {
            value = chartData[i].value;
          }
        }
        return `{oneone|${name}} {twotwo|${value}个}`;
        // 富文本第一列样式应用  富文本第二列样式应用  富文本第三列样式应用
      },
    },
    toolbox: {
      show: false,
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["50%", "74%"],
        top: "0",
        left: "-108",
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 12,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: chartData,
      },
    ],
  };
  setOptions(chartOption);
};

onMounted(() => {
  initChartData();
});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.monitoringStations {
  width: 50%;
  height: 100%;
  .content {
    width: 100%;
    height: calc(100% - 40px);
    position: relative;
    padding-right: 30px;
    padding-top: 10px;
    .chartBG {
      width: 164px;
      height: 164px;
      background: url(./images/chart_bg.png) no-repeat;
      background-size: contain;
      position: absolute;
      top: 16px;
      left: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        h3 {
          color: #fff;
          font-size: 20px;
          font-weight: bold;
          transform: scaleY(1.1);
          line-height: 24px;
        }
        p {
          color: rgba(180, 223, 255, 1);
          font-size: 11px;
        }
      }
    }
    .chartContent {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
